<template>
	<view>
		<!-- 列表 -->
		<w-scroll-view>
			<view class="flex ">
				<view class="materialsItem" v-for="(item,idx) in mlist" :key="idx">
					<text class="title font-color-textPrimary" v-if="list.length>1">{{ handleLang(item.name) }}</text>
					<view class="flex">
						<view class="cpItem" v-for="(items,idxs) in item.collectionList" :key="idxs" @click="changeCollection(item,idx,idxs)">
							<!-- 添加 -->
							<block v-if="!items.id">
								<view class="img"></view>
								<text class="addText text-overflow mtb-10 font-size-12">{{handleLang('请添加合成原料')}}</text>
								<w-icon name="tjcp" size="18"></w-icon>
							</block>
							<!-- 切换 -->
							<block v-else>
								<w-image :src="items.img" width="56" height="56"></w-image>
								<view class="right">
									<text class="t2">{{ handleLang(items.name) }}</text>
									<view>
										<view># {{ items.code }} /{{ items.num }} </view>
										<w-icon name="qhcp" size="18"></w-icon>
									</view>
								</view>
							</block>
						</view> 
					</view>
				</view>
			</view>
		</w-scroll-view>
		
		<!-- 弹窗 -->
		<w-popup-bottom v-model="isPop" :title="popTitle" bgColor="#fff">
			<view class="pop_con">
				<u-checkbox-group activeColor="#1952F8" v-model="checkboxValue" @change="changeCheckbox" shape="circle" placement="column">
					<view v-for="item in popList" :key="item.id" class="cp_item" 
					:class="{'cp_item_action':checkboxValue.includes(item.id)}">
						<!-- disable 蒙层 -->
						<view class="disableStyle" v-if="item.disable"></view>
						
						<text class="cp_title font-color-222">{{ handleLang(item.name) }}</text>
						<!-- 判断用户是否需要购买 -->
						<w-button size='mini' class="pop_row_btn" v-if="item.type=='goPay'" @click="$u.route('/pages/market/marketGoodsList',{'id':item.id,'goodsType':2})">{{handleLang('去购买')}}</w-button>
						<view class="flex-1 flex-center-sb" v-else>
							<view class="font-size-10 font-color-describe"># <text class="font-color-textPrimary">{{ item.collection_code }}</text> /{{ item.total_num }} </view>
							<u-checkbox :name="item.id"></u-checkbox>
						</view>
						
					</view>
				</u-checkbox-group>
			</view>
			<view class="pop_button">
				<view class="num">{{handleLang('已选择')}} <text class="font-color-theme">{{ checkboxValue.length }}</text>{{handleLang('个')}} </view>
				<w-button type="colorful" class="btn" :disabled="checkboxValue.length!=isCheckboxNum" @click="confim">{{handleLang('确定')}}</w-button>
			</view>
		</w-popup-bottom>
	</view>
</template>

<script>
	import { selectCollection } from '@/api/compound/index.js';
	export default {
		props:{
			list:{
				type: Array,
				default: []
			}
		},
		computed:{
			// 材料列表
			mlist:{
				set(val){
					return val
				},
				get() {
					let list = uni.$u.deepClone(this.list);
					list.forEach(item=>{
						let num = item.number - item.collectionList.length;
						let newList = new Array(num).fill({ id:'',img:'',name:'',code:'',num:'' });
						item.collectionList = [...item.collectionList,...newList];
					})
					return list
				}
			}
		},
		data() {
			return {
				isPop:false,
				popTitle:'请选择藏品',
				popList:[],
				checkboxValue:[],
				isCheckboxNum:null,  // 需达成的选中条件
				mlIdx:0,             // 材料下标
				cpIdx:0              // 藏品下标
			};
		},
		methods:{
			// 添加或切换藏品
			changeCollection(item,mlIdx,cpIdx){
				uni.$u.throttle(()=>{
					uni.showLoading()
					
					// 查询自己的藏品
					selectCollection({ collection_ids:item.collection_ids }).then(res=>{
						this.mlIdx = mlIdx;
						this.cpIdx = cpIdx;
						this.popTitle = `请选择${item.number}个藏品`;
						this.isCheckboxNum = item.number;
						let { needBuyCollectionList,userHaveCollectionList } = res.data;
						// 购买列表
						let payList = needBuyCollectionList.map(items=>{
							items.type = 'goPay';
							return items
						})
						// 藏品列表
						let list = userHaveCollectionList.map(items=>{
							items.disable = false;
							return items
						})
						
						if(payList.length || list.length){
							this.popList = [...payList,...list];
							// 判断回现
							if(item.collectionList && item.collectionList.length){
								let checkboxVal = item.collectionList.map(items=>items.id);
								this.checkboxValue = checkboxVal.filter(items=>!!items);
								this.changeCheckbox(this.checkboxValue);
							}
							this.isPop = true;
						}else{
							uni.$u.toast('暂无藏品~')
						}
					}).catch(()=>{})
				}, 500)
			},
			
			// 选中的藏品
			changeCheckbox(e) {
				this.popList.forEach(item=>{
					item.type!='goPay' && (item.disable=false)
				})
				// 达成数量条件其他disable
				if(e.length==this.isCheckboxNum){
					this.popList.forEach(item=>{
						if(!e.includes(item.id) && item.type!='goPay') item.disable = true;
					})
				}
			},
			
			// 确定选择
			confim() {
				let list = this.popList.filter(item=>!item.disable&&item.type!='goPay');
				let newCollectionList = list.map(item=>{
					return { id:item.id,img:item.main_image,name:item.name,code:item.collection_code,num:item.total_num }
				})
				let mlIdx = this.mlIdx;
				let cpIdx = this.cpIdx;
				let mlist = this.mlist;
				
				this.mlist = mlist.map((item,idx)=>{
					if(mlIdx==idx){
						item.collectionList = newCollectionList
					}
					return item
				})
				this.$emit('change',this.mlist)
				this.isPop = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.materialsItem{
		background-color: #474142;
		@extend .mt-12,.mr-8,.br-12,.pa-12;
		>.title{
			font-size: 24rpx;
			font-weight: 500;
			color: #fff;
		}
		.cpItem{
			border-radius: 16rpx;
			// background-image: url($IMG_URL + '/static/bg/HCCL-BG.png');
			// border: 1rpx solid $theme-color;
			background-size:100% 100%;
			@extend .pa-12,.flex,.flex-dir-col,.flex-ai-center;
			
			.img{ width: 112rpx;height: 112rpx;background-color: #d3d4da;border-radius: 8rpx; }
			.addText{
				@extend .font-size-12,.font-color-describe;
			}
			>.right{
				width: calc(100% - 132rpx);
				height: 112rpx;
				@extend .flex,.flex-dir-col,.flex-js-sb;
				>.t2{
					display: inline-block;
					@extend .font-size-14,.font-color-textPrimary,.text-overflow;
				}
				>view{
					width: 100%;
					@extend .flex-center-sb;
					>view{
						@extend .font-size-10,.font-color-999;
						>text{
							@extend .font-color-black,.mlr-4,.font-size-14;
						}
					}
				}
			}
		}
	}

	.pop_con{
		width: 100%;
		max-height: 50vh;
		overflow-y: scroll;
		margin-top: 34rpx;
		
		/deep/ .u-checkbox>text{
			position: absolute;
			width: 100%;
			height: 90rpx;
			left: 0;
			top: 0;
		}
		
		.cp_item{
			width: 100%;
			border: 2rpx solid #999;
			border-radius: 8rpx;
			position: relative;
			@extend .pa-12,.mb-16,.flex-center-sb;
			
			>.disableStyle{
				width: calc(100% + 4rpx);
				height: calc(100% + 4rpx);
				position: absolute;
				left: -2rpx;
				top: -2rpx;
				z-index: 1;
				// background-color: rgba(255,255,255,0.3);
			}
			>.cp_title{
				max-width: 300rpx;
				@extend .mr-16,.font-size-14,.text-overflow;
			}
		} 
		.cp_item_action{ border-color: $theme-color; }
	}
	.pop_row_btn{
		width: 110rpx;
		height: 44rpx;
		line-height: 44rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
	}
	.pop_button{
		width: 100%;
		@extend .flex-center-sb;
		
		>.num{
			@extend .font-size-16,.font-color-describe;
			>text{ 
				display: inline-block;
				@extend .font-size-18,.plr-4;
			}
		}
		>.btn{
			width: 490rpx;
			height: 92rpx;
			line-height: 92rpx;
			font-size: 32rpx;
			border-radius: 50rpx;
		}
	}
</style>
